<!--  -->
<template>
  <div class="el-upload-simple-file-container">
    <div class="content">
      <el-image :src="data" fit="contain" class="content-image" v-if="fileType === 'image'" ></el-image>
      <div class="content-item pdf" v-else-if="fileType === 'pdf'">
        <img src="../icons/file-pdf.png" class="file-icon" />
        <div class="file-name">PDF文件</div>
      </div>
      <div class="content-item ppt" v-else-if="fileType === 'ppt'">
        <img src="../icons/file-ppt.png" class="file-icon" />
        <div class="file-name">PPT文件</div>
      </div>
      <div class="content-item word" v-else-if="fileType === 'word'">
        <img src="../icons/file-word.png" class="file-icon" />
        <div class="file-name">WORD文件</div>
      </div>
      <div class="content-item video" v-else-if="fileType === 'video'">
        <video controls :src="data" />
        <div class="delete" @click="toDelete">
          <el-icon><Delete /></el-icon>
        </div>
      </div>
      <div class="content-item other" v-else>
        <img src="../icons/file.png" class="file-icon" />
        <div class="file-name">文件</div>
      </div>
    </div>
    <div class="operate" v-if="fileType !== 'video'">
      <div class="preview" @click="toPreview">
        <el-icon><View /></el-icon>
      </div>
      <div class="download" @click="toDownload">
        <el-icon><Download /></el-icon>
      </div>
      <div class="delete" @click="toDelete">
        <el-icon><Delete /></el-icon>
      </div>
    </div>
    <el-image-viewer 
      v-if="preview.visible"
      :url-list="preview.list"
      :initial-index="preview.index"
      @close="closeImageViewer"
      :hide-on-click-modal="true"
    />
  </div>
</template>
<script setup lang="ts">
import {} from "vue";
import { View, Download, Delete } from "@element-plus/icons-vue";
import { getFileType, previewFile } from "@/global/utils/common";

const props = defineProps<{
  data: string,
  list?: string[]
}>()
const emits = defineEmits(['delete-file'])
// 文件类型
const fileType = computed(() => {
  let type = getFileType(props.data)
  return type
})

/**
 * 去预览
 */
const preview = reactive({
  visible: false, list: [] as string[], index: 0
})
const closeImageViewer = () => {
  preview.visible = false
  preview.list = []
}
const toPreview = () => {
  if (fileType.value === 'image') {
    preview.visible = true
    if (props.list) {
      let arr = [] as string[]
      props.list.forEach((item: string) => {
        if (getFileType(item) === 'image') {
          arr.push(item)
        }
      })
      let i = arr.findIndex(item => item === props.data)
      preview.list = arr
      preview.index = i >= 0 ? i : 0
    } else {
      preview.list = [props.data]
    }
  } else {
    props.data && props.data && previewFile(props.data)
  }
}
/**
 * 去下载
 */
const toDownload = () => {
  const aTag = document.createElement('a')
  let time = new Date().valueOf()
  aTag.href = props.data + `?time=${time}`
  aTag.target = '_blank'
  aTag.click()
}
/**
 * 去删除
 */
const toDelete = () => {
  emits('delete-file')
}

</script>
<style scoped lang="scss">
  .el-upload-simple-file-container {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid var(--el-border-color);
    .content {
      width: 100%;
      height: 100%;
      .content-image {
        width: 100%;
        height: 100%;
      }
      .content-item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .file-icon {
          width: 40px;
          margin-bottom: 10px;
        }
        .file-name {
          font-size: 18px;
          font-weight: bold;
          color: #000;
        }
      }
      .video {
        width: 100%;
        position: relative;
        video {
          width: 100%;
          height: 100%
        }
        > .delete {
          position: absolute;
          right: 5px;
          top: 5px;
          width: 35px;
          height: 35px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: red;
          font-size: 18px;
          cursor: pointer;
          transition: all .3s;
          background-color: #ebc5c5;
          &:hover {
            background-color: #e38f8f;
          }
        }
      }
    }
    .operate {
      background-color: rgba($color: #000000, $alpha: .5);
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .3s;
      .preview {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 18px;
        cursor: pointer;
        transition: all .3s;
        background-color: #6db8fa;
        margin-right: 15px;
        &:hover {
          background-color: #0044ff;
        }
      }

      .delete {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: red;
        font-size: 18px;
        cursor: pointer;
        transition: all .3s;
        background-color: #ebc5c5;
        &:hover {
          background-color: #e38f8f;
        }
      }
      .download {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(-el-color-primary);
        font-size: 18px;
        cursor: pointer;
        transition: all .3s;
        background-color: rgb(120, 247, 120);
        margin-right: 15px;
        &:hover {
          background-color: #54ebae;
        }
      }
    }
    &:hover {
      .operate {
        opacity: 1;
      }
    }
  }
</style>